<template>
  <section class="right-mystery-box">
    <div class="cube-container">
      <div
        class="cube-item"
        v-for="(cube, index) in cubes"
        :key="index"
        @click="handleCubeClick">
        <div class="face front" :data-info="cube.front">
          <img :src="cube.front" alt="" srcset="">
        </div>
        <div class="face back" :data-info="cube.back">
          <img :src="cube.back" alt="" srcset="">
        </div>
        <div class="face left" :data-info="cube.left">
          <img :src="cube.left" alt="" srcset="">
        </div>
        <div class="face right" :data-info="cube.right">
          <img :src="cube.right" alt="" srcset="">
        </div>
        <div class="face top" :data-info="cube.top">
          <img :src="cube.top" alt="" srcset="">
        </div>
        <div class="face bottom" :data-info="cube.bottom">
          <img :src="cube.bottom" alt="" srcset="">
        </div>
      </div>
    </div>

    <base-dialog
      v-model="visible"
      :titleVisible="false"
      :footerVisible="false"
      :closeOnClickModal="false"
      dialogBodyBackgroundColor="transparent">
      <section class="custom-content">
        <img :src="currentImg" alt="" srcset="">
        <p class="animated-text">{{mysteryInfo.title}}</p>
        <a :href="mysteryInfo.link" target="_blank" class="button" rel="noopener noreferrer">去看看</a>
        <p class="split"></p>
        <p class="close-button" @click="visible = false">
          <svg-icon icon-class="icon-close"></svg-icon>
        </p>
      </section>
    </base-dialog>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {mysteryFetcher} from '@/api/mysteries';
import type {MysteryInfo} from '@/types/index'
import {imageList} from '@/api/common'

interface Cube {
  front: string;
  back: string;
  left: string;
  right: string;
  top: string;
  bottom: string;
}

const visible = ref(false);
const mysteryInfo = ref<MysteryInfo>({} as MysteryInfo);

const currentImg = ref('');
const cubes = ref<Cube[]>([]);
const cube = ref<Cube>({
  front: '',
  back: '',
  left: '',
  right: '',
  top: '',
  bottom: '',
});
Object.keys(cube.value).forEach((key, idx) => {
  const cubeKey = key as keyof Cube;
  if(imageList[idx]) {
    cube.value[cubeKey] = imageList[idx].module as string;
  }
})
cubes.value = [cube.value];

const handleCubeClick = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  const face = target.closest('.face');
  if (face) {
    const info = face.getAttribute('data-info') || '';
    console.log('Clicked face info:', info, );
    currentImg.value = info;
    mysteryInfo.value = mysteryFetcher.getNext();
    visible.value = true;
  }
};
</script>

<style scoped lang="scss">
.cube-container {
  display: flex;
  align-items: center;
  height: 200px;
  top: -60px;
  position: relative;
  padding-left: 60px;
  padding-right: 60px;
  box-sizing: border-box;
  .cube-item {
    position: relative;
    width: 120px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-45deg);
    animation: rotate 6s infinite linear;
    .face {
      position: absolute;
      width: 120px;
      height: 120px;
      background: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border-radius: 8px;
      border: 1px solid var(--main-border-color);
      backface-visibility: hidden;
      img {
        width: 80px;
        height: 80px;
      }
    }

    .front {
      transform: translateZ(60px);
    }
    .back {
      transform: rotateY(180deg) translateZ(60px);
    }
    .left {
      transform: rotateY(-90deg) translateZ(60px);
    }
    .right {
      transform: rotateY(90deg) translateZ(60px);
    }
    .top {
      transform: rotateX(90deg) translateZ(60px);
    }
    .bottom {
      transform: rotateX(-90deg) translateZ(60px);
    }
  }
  .cube-item:hover {
    animation-play-state: paused;
  }
}

@keyframes rotate {
  from { transform: rotateX(-30deg) rotateY(-45deg) rotateY(0deg); }
  to { transform: rotateX(45deg) rotateY(90deg) rotateY(360deg); }
}

.custom-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;

  img {
    width: 200px;
    height: auto;
  }

  .split {
    width: 1px;
    background-color: #D1C4E9;
    height: 32px;
    margin-top: 32px;
  }

  .close-button {
    width: 24px;
    height: 24px;
    border: 1px solid #D1C4E9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D1C4E9;
    font-size: 12px;
  }

  .animated-text {
    height: 24px;
    font-size: 16px;
    background: linear-gradient(to right, #FFB6C1, #FFC0CB, #E6E6FA, #D1C4E9, #B39DDB, #9575CD, #7E57C2);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: textAnimation 2s linear infinite;
    max-width: 70%;
  }

  .button {
    margin-top: 20px;
    padding: 4px 8px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid #B39DDB;
    color: #ffffff;
  }
}


@keyframes textAnimation {
  0% {
    background-position: 0% 50%;
    font-size: 16px;
  }
  50% {
    background-position: 100% 50%;
    font-size: 18px;
  }
  100% {
    background-position: 0% 50%;
    font-size: 20px;
  }
}
</style>
